<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>流程管理-启动实例</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="shortcut icon" href="favicon.ico">
<link href="/hplus/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/hplus/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<!-- jqgrid-->
<link href="/hplus/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<link href="/hplus/css/plugins/jqgrid/ui.jqgrid.css?0820"
	rel="stylesheet">
<link href="/hplus/css/animate.css" rel="stylesheet">
<link href="/hplus/css/style.css?v=4.1.0" rel="stylesheet">
<style>
/* Additional style to fix warning dialog position */
#alertmod_table_list_2 {
	top: 900px !important;
}
</style>
</head>
<body>
	<div class="wrapper wrapper-content  animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox ">
					<hr>
					<div class="jqGrid_wrapper" style="overflow-x: scroll;">
						<table id="table_list_1"></table>
						<div id="pager_list_1"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>

	<!-- 全局js -->
	<script src="/hplus/js/jquery.min.js?v=2.1.4"></script>
	<script src="/hplus/js/bootstrap.min.js?v=3.3.6"></script>
	<!-- Peity -->
	<script src="/hplus/js/plugins/peity/jquery.peity.min.js"></script>
	<!-- jqGrid -->
	<script src="/hplus/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="/hplus/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
	<!-- 自定义js -->
	<script src="/hplus/js/content.js?v=1.0.0"></script>
	<script src="/hplus/js/plugins/layer/laydate/laydate.js"></script>
	<!-- Sweet alert -->
	<script src="/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>
	<script src="/hplus/js/plugins/layer/layer.min.js"></script>
	<script src="/js/contentpagelist.js"></script>
	<!-- Page-Level Scripts -->
	<script type="text/javascript">
		var contentPageType;

		$(document)
				.ready(
						function() {

							$.jgrid.defaults.styleUI = 'Bootstrap';
							$("#table_list_1")
									.jqGrid(
											{
												datatype : "json",
												url : 'taskHandleredList', //这是数据的请求地址
												mtype : "POST",
												height : "550",
												//autowidth: true,
												shrinkToFit : false,
												autoScroll : true,
												jsonReader : {
													root : "rows",//数据模型
													page : "page",//数据页码
													total : "totalPage", //数据总页码
													records : "totalResult",//数据总记录数
													userdata : "userdata",//数据总记录数
													repeatitems : false,
													id : "id"
												},
												rowNum : 10,
												rowList : [ 10, 20, 50 ],
												colNames : [ 'ID', '任务id',
														'任务名称', '流程实例id',
														'开始时间', '结束时间', '优先级',
														'操作'

												],
												colModel : [
														{
															name : 'id',
															index : 'id',
															hidden : true
														},
														{
															name : 'taskId',
															index : 'taskId'
																,align:'center'
														},
														{
															name : 'taskName',
															index : 'taskName',
															width : 150,align:'center'
														},
														{
															name : 'processInstanceId',
															index : 'processInstanceId',
															width : 150,align:'center'
														},
														{
															name : 'startTime',
															index : 'startTime',
															width : 150,align:'center',
															formatter : function(
																	cellValue,
																	options,
																	rowObject) {
																var oldTime = (new Date(rowObject.startTime)).getTime();
  																  var da = new Date(oldTime);
  																 var year = da.getFullYear()+'年';
  															    var month = da.getMonth()+1+'月';
  															    var date = da.getDate()+'日';
																return [year,month,date].join('-');
															}
														},
														{
															name : 'endTime',
															index : 'endTime',
															width : 150,
															align:'center',
															formatter : function(
																	cellValue,
																	options,
																	rowObject) {
																var oldTime = (new Date(rowObject.endTime)).getTime();
  																  var da = new Date(oldTime);
  																 var year = da.getFullYear()+'年';
  															    var month = da.getMonth()+1+'月';
  															    var date = da.getDate()+'日';
																return [year,month,date].join('-');
															}
														},
														{
															name : 'priority',
															index : 'priority',
															width : 100
														},
														{
															name : '',
															index : '',
															formatter : opratorFmatter,
															width : 360
														} ],
												onPaging : function(pgButton) { //当点击翻页按钮但还为展现数据时触发此事件, 当然这跳转栏输入页
													//码改变页时也同样触发此事件
													jQuery("#table_list_1")
															.jqGrid(
																	"setGridParam",
																	{
																		url : 'taskHandleredList'
																	});
												},
												pager : "#pager_list_1",
												viewrecords : true,
												rownumbers : true,
												hidegrid : false,
												gridComplete : function() {
													//当表格所有数据都加载完成，处理统计行数据
												}
											});
						});

		function opratorFmatter(cellvalue, options, rowObject) {
			var viewBtn = "&nbsp;&nbsp;<button class=\"btn btn-outline btn-info\" type=\"button\"  onclick=\"showActivityedPage('"
					+ rowObject.processInstanceId
					+ "')\"><i class=\"fa fa-edit\"></i>&nbsp;流程跟踪</button>&nbsp;&nbsp;";
			return viewBtn ;
		}
		function showActivityedPage(processInstanceId) {
		    var index = layer.open({
		        type: 2,
		        title: '流程图页面',
		        shadeClose: true,
		        shade: false,
		        maxmin:false , //开启最大化最小化按钮
		        area: ['1400px', '750px'],
		        content: "/process/showActivityedimageDetailPage?processInstanceId=" + processInstanceId 
		    });
		    layer.full(index);
		}
		function queryData() {
			$("#table_list_1").jqGrid('setGridParam', {
				datatype : 'json',
				postData : {
					'processDefName' : $("#processDefName").val(),
					'category' : $("#category").val()
				},
				page : 1
			}).trigger("reloadGrid");
		}
	</script>

</body>
</html>